<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:composite="http://java.sun.com/jsf/composite">

    <composite:interface>

        <composite:attribute name="descriptionDisabled"/>
        <composite:attribute name="productDisabled"/>
        <composite:attribute name="qtyDisabled"/>
        <composite:attribute name="estimatedDeliveryDateDisabled"/>
        <composite:attribute name="priceDisabled"/>
        <composite:attribute name="discountDisabled"/>

        <composite:attribute name="productRequired"/>
        <composite:attribute name="qtyRequired"/>
        <composite:attribute name="estimatedDeliveryDateRequired"/>
        <composite:attribute name="priceRequired"/>
        <composite:attribute name="discountRequired"/>

    </composite:interface>

    <h:panelGrid columns="3"
                 columnClasses="columnWidth48, columnWidth4, columnWidth48"
                 width="90%"
                 style="margin-left: auto; margin-right: auto">

        <h:panelGrid columns="1"
                     columnClasses="columnWidth100"
                     rowClasses="rowAlign"
                     width="100%">

            <p:outputLabel value="#{bundle.Order}"
                           for="order"/>

            <p:inputText id="order" 
                         style="width: 100%; margin-bottom: 2%"                          
                         value="#{orderItemController.selected.orderHeader.formattedDocument}"
                         disabled="true"/>

            <p:outputLabel value="#{bundle.Product}"
                           for="product"/>

            <p:selectOneMenu id="product" 
                             style="width: 100%; margin-bottom: 1.2%"                            
                             value="#{orderItemController.selected.product}"
                             tabindex="02"
                             valueChangeListener="#{orderItemController.productUpdate}"
                             converter="productConverter"
                             effect="fade"
                             filter="true"
                             filterMatchMode="contains"
                             disabled="#{cc.attrs.productDisabled}"
                             required="#{cc.attrs.productRequired}">

                <f:selectItem itemLabel="#{orderItemController.selected.product.codeAndNameWithDisabledFormatting}"
                              itemValue="#{orderItemController.selected.product}"/>

                <f:selectItems value="#{orderItemController.selectProduct}"
                               var="item"
                               itemLabel="#{item.label}"
                               itemValue="#{item}"/>

                <p:ajax update="color"/>

                <p:ajax update="productPrice"/>

                <p:ajax update="discount"/>

                <p:ajax update="price"/>

                <p:ajax update="qty"/>

                <p:ajax update="amount"/>

            </p:selectOneMenu>

            <p:outputLabel value="#{bundle.ProductPrice}"
                           for="productPrice"/>            

            <p:inputText id="productPrice" 
                         style="width: 100%; margin-bottom: 2%"
                         value="#{orderItemController.selected.productPrice}"
                         disabled="true">

                <f:convertNumber pattern="#,##0.00"
                                 locale="#{localizationUtil.selected}"/>             

            </p:inputText>             

            <p:outputLabel value="#{bundle.Quantity}"
                           for="qty"/>

            <p:inputText id="qty" 
                         style="width: 100%; margin-bottom: 2%"
                         value="#{orderItemController.selected.qty}"
                         tabindex="05"
                         valueChangeListener="#{orderItemController.qtyUpdate}"
                         disabled="#{cc.attrs.qtyDisabled}"
                         required="#{cc.attrs.qtyRequired}">

                <f:convertNumber pattern="#,##0"
                                 locale="#{localizationUtil.selected}"/>

                <p:ajax update="amount"/>

            </p:inputText>               

            <p:outputLabel value="#{bundle.EstimatedDeliveryDate}"
                           for="estimatedDeliveryDate"/>  

            <p:calendar id="estimatedDeliveryDate"
                        styleClass="calendarStyle24"
                        value="#{orderItemController.selected.estimatedDeliveryDate}"
                        tabindex="07"
                        effect="fade" 
                        showWeek="true"
                        showButtonPanel="true"
                        locale="#{localizationUtil.selected}"
                        pattern="#{localizationUtil.dateFormatMediumPattern}"
                        timeZone="#{localizationUtil.defaultTimeZone}"
                        disabled="#{cc.attrs.estimatedDeliveryDateDisabled}"
                        required="#{cc.attrs.estimatedDeliveryDateRequired}"/>             

        </h:panelGrid>   

        <p:spacer/>

        <h:panelGrid columns="1"
                     columnClasses="columnWidth100"
                     rowClasses="rowAlign"
                     width="100%">

            <p:outputLabel value="#{bundle.Description}" 
                           for="description"/>

            <p:inputText id="description" 
                         style="width: 100%; margin-bottom: 2%"
                         value="#{orderItemController.selected.description}"
                         tabindex="01"
                         disabled="#{cc.attrs.descriptionDisabled}"/>

            <p:outputLabel value="#{bundle.Color}"
                           for="color"/>

            <p:selectOneMenu id="color" 
                             style="width: 100%; margin-bottom: 1.2%"                            
                             value="#{orderItemController.selected.color}"
                             tabindex="03"
                             converter="colorConverter"
                             effect="fade"
                             filter="true"
                             filterMatchMode="contains"
                             disabled="#{cc.attrs.productDisabled}"
                             required="#{cc.attrs.productRequired}">

                <f:selectItem itemLabel="#{orderItemController.selected.color.nameWithDisabledFormatting}"
                              itemValue="#{orderItemController.selected.color}"/>

                <f:selectItems value="#{orderItemController.selectColor}"
                               var="item"
                               itemLabel="#{item.label}"
                               itemValue="#{item}"/>

                <p:ajax update="productPrice"/>

                <p:ajax update="discount"/>

                <p:ajax update="price"/>

                <p:ajax update="amount"/>

            </p:selectOneMenu>

            <p:outputLabel value="#{bundle.Discount}"
                           for="discount"/>            

            <p:inputText id="discount" 
                         style="width: 100%; margin-bottom: 2%"
                         value="#{orderItemController.selected.discount}"
                         tabindex="04"
                         valueChangeListener="#{orderItemController.discountUpdate}"
                         disabled="#{cc.attrs.discountDisabled}"
                         required="#{cc.attrs.discountRequired}">

                <f:convertNumber pattern="#,##0.00"
                                 locale="#{localizationUtil.selected}"/>

                <p:ajax update="price"/>

                <p:ajax update="amount"/>

            </p:inputText>  

            <p:outputLabel value="#{bundle.Price}"
                           for="price"/>            

            <p:inputText id="price" 
                         style="width: 100%; margin-bottom: 2%"
                         value="#{orderItemController.selected.price}"
                         tabindex="06"
                         valueChangeListener="#{orderItemController.priceUpdate}"
                         disabled="#{cc.attrs.priceDisabled}"
                         required="#{cc.attrs.priceRequired}">

                <f:convertNumber pattern="#,##0.00"
                                 locale="#{localizationUtil.selected}"/>

                <p:ajax update="discount"/>

                <p:ajax update="amount"/>                

            </p:inputText>             

            <p:outputLabel value="#{bundle.Amount}"
                           for="amount"/>

            <p:inputText id="amount" 
                         style="width: 100%"
                         value="#{orderItemController.selected.amount}"
                         disabled="true">

                <f:convertNumber pattern="#,##0.00"
                                 locale="#{localizationUtil.selected}"/>

            </p:inputText>              

        </h:panelGrid>       

    </h:panelGrid>

    <p:dialog header="#{bundle.AdditionalInfo}"
              widgetVar="additionalInfoDialog" 
              resizable="false" 
              modal="true" 
              showEffect="fade"
              hideEffect="fade" 
              draggable="false"
              width="48%"
              style="margin-left: auto; margin-right: auto">

        <h:panelGrid columns="3"
                     columnClasses="columnWidth48, columnWidth4, columnWidth48"
                     width="90%"
                     style="margin-left: auto; margin-right: auto">

            <h:panelGrid columns="1"
                         columnClasses="columnWidth100"
                         rowClasses="rowAlign"
                         width="100%">

                <p:outputLabel value="#{bundle.Id}" 
                               for="id"/>

                <p:inputText id="id" 
                             style="width: 100%; margin-bottom: 2%"
                             value="#{orderItemController.selected.id}"
                             disabled="true"/>         

                <p:outputLabel value="#{bundle.CreatedBy}" 
                               for="createdBy"/>

                <p:inputText id="createdBy" 
                             style="width: 100%; margin-bottom: 2%"
                             value="#{orderItemController.selected.createdBy.name}"
                             disabled="true"/>

                <p:outputLabel value="#{bundle.UpdatedBy}" 
                               for="updatedBy"/>

                <p:inputText id="updatedBy"   
                             style="width: 100%"
                             value="#{orderItemController.selected.updatedBy.name}"
                             disabled="true"/>         

            </h:panelGrid>

            <p:spacer/>

            <h:panelGrid columns="1"
                         columnClasses="columnWidth100"
                         rowClasses="rowAlign"
                         width="100%">

                <p:spacer/>

                <p:spacer style="margin-bottom: 12.2%"/>

                <p:outputLabel value="#{bundle.Created}" 
                               for="created"/>

                <p:inputText id="created"
                             style="width: 100%; margin-bottom: 2%"
                             value="#{orderItemController.selected.created}"
                             disabled="true">

                    <f:convertDateTime 
                        locale="#{localizationUtil.selected}" 
                        type="both"
                        pattern="#{localizationUtil.dateTimeFormatMediumPattern}" 
                        timeZone="#{localizationUtil.defaultTimeZone}"/>      

                </p:inputText>  

                <p:outputLabel value="#{bundle.Updated}" 
                               for="updated"/>

                <p:inputText id="updated"
                             style="width: 100%"
                             value="#{orderItemController.selected.updated}"
                             disabled="true">

                    <f:convertDateTime 
                        locale="#{localizationUtil.selected}" 
                        type="both"
                        pattern="#{localizationUtil.dateTimeFormatMediumPattern}" 
                        timeZone="#{localizationUtil.defaultTimeZone}"/>

                </p:inputText>         

            </h:panelGrid>    

        </h:panelGrid>

    </p:dialog>   

</html>